import { onMounted, ref } from 'vue';
import { computed, defineComponent, SetupContext } from 'vue';
import { MemoryVoicePersonalCenterProps, memoryVoicePersonalCenterProps } from './personnel-center.props';
import FMemoryVoiceCreateResource from '../create-resouce/create-resouce.component';
import FMemoryVoiceCourseManage from '../course-management/course-management.component';
import './personnel-center.scss';
import { userInfo } from '../../composition/use-data';
import { PersonalCenterTab } from '../../composition/types';

export default defineComponent({
    name: 'FMemoryVoicePersonalCenter',
    props: memoryVoicePersonalCenterProps,
    emits: [] as (string[] & ThisType<void>) | undefined,
    setup(props: MemoryVoicePersonalCenterProps, context: SetupContext) {
        const currentView = ref(PersonalCenterTab.createResource);

        const avatar1 = ref(userInfo?.value?.avatar);
        function onAvatarChange(newValue: string) {
            // console.log(newValue);
        }

        function successToCreateResource() {
            currentView.value = PersonalCenterTab.courseManagement;
        }

        function onChangeLeftNavTab(tabType: PersonalCenterTab) {
            currentView.value = tabType;
        }
        return () => {
            return (
                <div class="mv-personal-center">
                    <div class="f-page-main main-container">
                        <f-splitter class="f-page-content">
                            <f-splitter-pane class="f-page-content-nav" position="left" style="width:200px;max-width: 300px">
                                <div class="left-panel">
                                    <div class="avatar-panel border-bottom">
                                        <f-avatar v-model={avatar1.value} onUpdate:modelValue={onAvatarChange}></f-avatar>
                                        <div class="name">{userInfo?.value?.name}</div>
                                    </div>
                                    <div class="nav">
                                        <div
                                            class={`item  ${currentView.value === PersonalCenterTab.homePage ? 'active' : ''}`}
                                            onClick={() => onChangeLeftNavTab(PersonalCenterTab.homePage)}>
                                            <span class="f-icon f-icon-top_home"></span>首页
                                        </div>
                                        <div
                                            class={`item  ${currentView.value === PersonalCenterTab.categoryManagement ? 'active' : ''}`}
                                            onClick={() => onChangeLeftNavTab(PersonalCenterTab.categoryManagement)}>
                                            <span class="f-icon f-icon-new-function"></span>分类管理
                                        </div>
                                        <div
                                            class={`item  ${currentView.value === PersonalCenterTab.courseManagement ? 'active' : ''}`}
                                            onClick={() => onChangeLeftNavTab(PersonalCenterTab.courseManagement)}>
                                            <span class="f-icon f-icon-new-function"></span>科目管理
                                        </div>
                                        <div
                                            class={`item  ${currentView.value === PersonalCenterTab.createResource ? 'active' : ''}`}
                                            onClick={() => onChangeLeftNavTab(PersonalCenterTab.createResource)}>
                                            <span class="f-icon f-icon-new-function"></span>资料创作
                                        </div>
                                        <div
                                            class={`item  ${currentView.value === PersonalCenterTab.setting ? 'active' : ''}`}
                                            onClick={() => onChangeLeftNavTab(PersonalCenterTab.setting)}>
                                            <span class="f-icon f-icon-home-setup"></span>设置
                                        </div>
                                    </div>
                                </div>
                            </f-splitter-pane>
                            <f-splitter-pane class="f-page-content-main pl-2" position="center">
                                {currentView.value === PersonalCenterTab.createResource ? (
                                    <FMemoryVoiceCreateResource onSuccess={successToCreateResource}></FMemoryVoiceCreateResource>
                                ) : (
                                    ''
                                )}
                                {currentView.value === PersonalCenterTab.courseManagement ? (
                                    <FMemoryVoiceCourseManage></FMemoryVoiceCourseManage>
                                ) : (
                                    ''
                                )}
                                {currentView.value === PersonalCenterTab.homePage ? (
                                    <div>
                                        <span>敬请期待</span>
                                    </div>
                                ) : (
                                    ''
                                )}
                                {currentView.value === PersonalCenterTab.categoryManagement ? '敬请期待' : ''}
                                {currentView.value === PersonalCenterTab.setting ? '敬请期待' : ''}
                            </f-splitter-pane>
                        </f-splitter>
                    </div>
                </div>
            );
        };
    }
});
